<html>
	<head>
		
		<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
		<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>

<!-- 		<script type="text/javascript" src="http://assets.macys.com/navapp/web20/assets/script/yahoo/2.8.0r4/yahoo/yahoo.js"></script> -->
<!-- 		<script type="text/javascript" src="http://assets.macys.com/navapp/web20/assets/script/yahoo/2.8.0r4/dom/dom.js"></script> -->
<!-- 		<script type="text/javascript" src="http://assets.macys.com/navapp/web20/assets/script/yahoo/2.8.0r4/event/event.js"></script> -->
		
		<style>
			.fixedBottomContent{
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #DDDDDD;
				padding: 10px 50px 10px 50px ;
				width: 100%;
				z-index:99;
				height: 100px;
			}
			.dropImg{
				width: 60px;
				height: 80px;
				float: left;
				border: solid 1px #000;
			}
			#dragOverlay{
				border: solid 2px #BBB;
				width: 164px;
				height: 201px;
				background-color: #FFF;
				position: absolute;
				z-index: 100;
				cursor: move;
				left: -500px;
				top: -500px;
			}
		</style>
	</head>
	<body>


		<div id="fixedMaster" style="width:100%">
			<div class="fixedBottomContent" id="fixedBottomContent">
				<div>
					<div id="DropImg1" class="dropImg"></div>
					<div id="DropImg2" class="dropImg"></div>
					<div id="DropImg3" class="dropImg"></div>
					<div id="DropImg4" class="dropImg"></div>
					<div id="DropImg5" class="dropImg"></div>
				</div>
				<div>
					<input type="button" id="enableDragDrop" value="enableDragDrop" onClick="enableDragDrop()"/>
				</div>
			</div>
		</div>

		<div id="dragOverlay">
			Drag me
		</div>

		<div style="width:800px">
			<div style="float:left">
				<img border="0" alt="Madden Girl Shoes, Toriie Pumps" title="Madden Girl Shoes, Toriie Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/9/optimized/1021159_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801.9801; top: 0pt; left: 0pt;" id="image_607385_4_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Nine West Shoes, NewHouse Loafer Pumps " title="Nine West Shoes, NewHouse Loafer Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/1004375_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_603659_5_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Karen Scott Shoes, Collin Pumps" title="Karen Scott Shoes, Collin Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/1000095_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_602797_6_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Jessica Simpson Shoes, Jessica Pumps" title="Jessica Simpson Shoes, Jessica Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/7/optimized/991027_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 10;" id="image_599904_7_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Marc Fisher Shoes, Keeps Loafer Platform Pumps - A Macy's Exclusive" title="Marc Fisher Shoes, Keeps Loafer Platform Pumps - A Macy's Exclusive" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/4/optimized/1004384_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 10;" id="image_596307_8_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="BCBGeneration Shoes, Parade Platform Pumps" title="BCBGeneration Shoes, Parade Platform Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/2/optimized/988552_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_593168_9_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Style&amp;co. Shoes, Tammy Pumps" title="Style&amp;co. Shoes, Tammy Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/6/optimized/977786_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_592031_10_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Bandolino Shoes, Transpose Wedges" title="Bandolino Shoes, Transpose Wedges" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/978315_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_592009_11_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Madden Girl Shoes, Toriie Pumps" title="Madden Girl Shoes, Toriie Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/9/optimized/1021159_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801.9801; top: 0pt; left: 0pt;" id="image_607385_4_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Nine West Shoes, NewHouse Loafer Pumps " title="Nine West Shoes, NewHouse Loafer Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/1004375_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_603659_5_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Karen Scott Shoes, Collin Pumps" title="Karen Scott Shoes, Collin Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/1000095_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_602797_6_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Jessica Simpson Shoes, Jessica Pumps" title="Jessica Simpson Shoes, Jessica Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/7/optimized/991027_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 10;" id="image_599904_7_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Marc Fisher Shoes, Keeps Loafer Platform Pumps - A Macy's Exclusive" title="Marc Fisher Shoes, Keeps Loafer Platform Pumps - A Macy's Exclusive" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/4/optimized/1004384_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 10;" id="image_596307_8_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="BCBGeneration Shoes, Parade Platform Pumps" title="BCBGeneration Shoes, Parade Platform Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/2/optimized/988552_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_593168_9_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Style&amp;co. Shoes, Tammy Pumps" title="Style&amp;co. Shoes, Tammy Pumps" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/6/optimized/977786_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_592031_10_cat" class="thumbnailImage crossfadeImage">
			</div>
			<div style="float:left">
				<img border="0" alt="Bandolino Shoes, Transpose Wedges" title="Bandolino Shoes, Transpose Wedges" name="CATimage" src="http://slimages.macys.com/is/image/MCY/products/5/optimized/978315_fpx.tif?bgc=255,255,255&amp;wid=164&amp;qlt=90,0&amp;layer=comp&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.7,1.0,0.5,0&amp;fmt=jpeg" style="width: 164px; height: 201px; opacity: 0.9801;" id="image_592009_11_cat" class="thumbnailImage crossfadeImage">
			</div>
		</div>
				
		<script>
			var currentImage = null;
			function setPosition(){
				var Ydom = YAHOO.util.Dom;
				
				var sfS = Ydom.getDocumentScrollTop();  
				var sfH = Ydom.getViewportHeight() + sfS;  

				Ydom.setStyle("fixedMaster","position", 'absolute');  
				Ydom.setStyle("fixedMaster","top", sfH+'px');
				
				Ydom.setStyle("fixedBottomContent","visibility", 'visible'); 
				
			}

			function enableDragDrop(){
				YAHOO.util.Dom.getElementsByClassName('thumbnailImage', 'img', document.body, 
					function(obj){
						YAHOO.util.Event.addListener(obj, 'mousemove', showDragLayer, obj);
					}
				);

			}
			
			function showDragLayer(event, obj){
				var xy = YAHOO.util.Dom.getXY(obj);
				YAHOO.util.Dom.setXY("dragOverlay", xy);
				currentImage = obj;
			}
			
			YAHOO.util.Event.addListener(window, 'resize', setPosition );
			YAHOO.util.Event.addListener(window, 'scroll', setPosition );
			YAHOO.util.Dom.setStyle("dragOverlay","opacity", "0.2");
			
		</script>
		
		
<script type="text/javascript">
    (function() {

        var dd, startPos,
            Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;

        YAHOO.util.Event.onDOMReady(function() {

            var el = Dom.get("dragOverlay");
            startPos = Dom.getXY(el);

            dd = new YAHOO.util.DD(el);

            dd.clickValidator = function(e) {
            	el.innerHTML = "Drop me in a empty box below. <br />" +  
            					"<img src='"+ currentImage.src +"' style='width:120px;height:160px;' />";
            	return true;
            };
            
            dd.onDragDrop = function(e, id) {
                target = Dom.get(id);
                el.innerHTML = "Drag me.";
                // Animating the move is more intesting
                new YAHOO.util.Motion( 
                    this.id, { 
                        points: { 
                            to: startPos
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();
                target.innerHTML = "<img src='"+ currentImage.src +"' style='width:60px;height:80px;' />";
            };

            dd.onInvalidDrop = function(e) {
            	el.innerHTML = "Drag me.";
            	
                // Animating the move is more intesting
                new YAHOO.util.Motion( 
                    this.id, { 
                        points: { 
                            to: startPos
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();

            };
        
            dd1 = new YAHOO.util.DDTarget("DropImg1");
            dd2 = new YAHOO.util.DDTarget("DropImg2");
            dd3 = new YAHOO.util.DDTarget("DropImg3");
            dd4 = new YAHOO.util.DDTarget("DropImg4");
            dd5 = new YAHOO.util.DDTarget("DropImg5");

        });

    })();
</script>

		
	</body>
</html> 